<template>
  <div class="modelType3-box"
       :style="styleMianObject">
    <div class="box-name"
         :style="nameStyleObject">{{ list.name }}</div>
    <div class="box-style"
         :style="boxStyleObject">
      <el-row :gutter="gutter"
              style="height: 100%;">
        <el-col :span="6"
                style="height: 100%;"
                :style="leftStyleObject">
          <div class="type-box"
               :style="typeBoxStyle"
               :class="{'type-box-choose' : chooseIndex == index, 'type-box-nochoose' : chooseIndex != index }"
               v-for="(ls,index) in list.contentLists"
               :key="index"
               @click="chooseChange(index)">
            {{index + 1}}.{{ ls.title }}
          </div>

        </el-col>
        <el-col :span="18"
                style="height: 100%;">
          <div :style="contentStyleObject"
               class="box-content"
               v-html="list.contentLists[chooseIndex].content || ''">
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Object,
      default: {
        title: ""
      }
    }
  },
  data () {
    return {
      gutter: 20,
      nameStyleObject: {
        fontSize: '40px',
        height: '60px',
        paddingLeft: '30px'
      },

      boxStyleObject: {
        height: 'calc(100% - 20px)',
        padding: '30px',
        fontSize: '48px',
      },

      contentStyleObject: {
        height: 'calc(100% - 20px)',
        padding: '80px'
      },

      styleMianObject: {
        padding: '10px 30px'
      },

      leftStyleObject: {
        padding: '5% 0'
      },

      typeBoxStyle: {
        padding: '25px 20px',
        fontSize: '30px'
      },

      zoom: 1,
      chooseIndex: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      const offsetWidth = document.getElementsByClassName("modelType3-box")[0].offsetWidth
      console.log(offsetWidth)
      this.zoom = offsetWidth / 1898
      this.nameStyleObject.fontSize = 40 * this.zoom + 'px'
      this.nameStyleObject.height = 60 * this.zoom + 'px'
      this.nameStyleObject.paddingLeft = 30 * this.zoom + 'px'

      this.styleMianObject.padding = `${10 * this.zoom}px ${30 * this.zoom}px`

      this.contentStyleObject.height = `calc(100% - ${20 * this.zoom}px)`
      this.contentStyleObject.padding = `${80 * this.zoom}px`


      this.typeBoxStyle.fontSize = `${30 * this.zoom}px !important`
      this.typeBoxStyle.padding = `${45 * this.zoom}px ${30 * this.zoom}px`

      this.boxStyleObject.height = `calc(100% - ${20 * this.zoom}px)`
      this.boxStyleObject.fontSize = `${48 * this.zoom}px !important`
      this.boxStyleObject.padding = `${30 * this.zoom}px !important`

      this.gutter = Math.floor(this.zoom * 20)
      console.log(this.gutter, 'this.gutterthis.gutter')
    })

  },
  methods: {
    chooseChange (index) {
      this.chooseIndex = index
    }
  }
}
</script>
<style lang="less" scoped>
.modelType3-box {
  background: url(../../../assets//img/bg-type/type2-1.png) no-repeat 100% 100%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  .box-style {
    height: calc(100% - 300px);
    display: block;
  }
  .title-style {
    position: absolute;
    bottom: 45%;
    color: #004da1;
    width: 50%;
    font-weight: bold;
  }
  .box-name {
    color: #004da7;
  }
  .box-content {
    height: calc(100% - 300px);
    background: url(../../../assets//img/bg-type/type3-1.png) no-repeat 100%
      100%;
    background-size: 100% 100%;
  }
  .type-box {
    height: 30%;
    margin: 5% 0;
    white-space: pre-wrap;
    word-break: break-all;
    display: block;
    color: #004ea6;
  }
  .type-box-choose {
    background: url(../../../assets//img/bg-type/type-choose.png) no-repeat 100%;
    background-size: 100% 100%;
    color: white;
  }
  .type-box-nochoose {
    background: url(../../../assets//img/bg-type/type-nochoose.png) no-repeat
      100%;
    background-size: 100% 100%;
    color: #004ea6;
  }
}
</style>
